<template>
  <!-- 新建区域 -->
  <div class="NewArea">
    <!-- 页面头部和查询区域 -->
    <div class="NewArea-tittle">
      <div class="crumbs">
        <p>
          <span>资料管理 /</span> <span>住户管理 /</span> <span> 新建住户</span>
        </p>
        <h3>新建住户</h3>
      </div>
    </div>
    <div class="NewArea-content">
      <div class="content-title">
        <span>基础信息</span>
      </div>
      <div class="add">
        <el-form require-asterisk-position="right">
          <el-form-item label="关联房屋" required="true">
            <el-input
              clearable
              v-model="addData.community"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="住户姓名" required="true">
            <el-input clearable v-model="addData.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="住户编号" required="true">
            <el-input
              type="number"
              clearable
              v-model="addData.serialNo"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="住户性别" required="true">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="addData.sex" class="ml-4">
                <el-radio label="男" size="large">男</el-radio>
                <el-radio label="女" size="large">女</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="证件类型" required="true">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="证件号码" required="true">
            <el-input
              type="number"
              clearable
              v-model="addData.identificationNumber"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="与业主关系" required="true">
            <el-select
              v-model="addData.relationships"
              class="m-2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in relationS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" required="true">
            <el-input
              type="number"
              clearable
              v-model="addData.phoneNumber"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="身份证正面照" required="true">
            <el-input
              clearable
              v-model="addData.certificateFront"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="身份证背面照" required="true">
            <el-input
              clearable
              v-model="addData.certificateBack"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="备注" style="margin-left: 30px">
            <el-input
              :rows="4"
              type="textarea"
              clearable
              v-model="addData.note"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>

        <div style="padding-left: 75px">
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";

const radio1 = ref("1");

let addData = ref({
  community: "",
  name: "",
  serialNo: "",
  identificationNumber: "",
  relationships: "",
  phoneNumber: "",
  note: "",
  certificateFront: "",
  certificateBack: "",
  sex: "",
  communityId: 1,
});


const relationships = ref('')
const relationS = [
  {
    value: '业主',
    label: '业主',
  },
  {
    value: '家属',
    label: '家属',
  },
  {
    value: '朋友',
    label: '朋友',
  },
  {
    value: '租户',
    label: '租户',
  },
  {
    value: '其他',
    label: '其他',
  },
]

const value = ref('')
const options = [
  {
    value: '身份证',
    label: '身份证',
  },
  {
    value: '港澳通行证',
    label: '港澳通行证',
  },
  {
    value: '护照',
    label: '护照',
  },
  {
    value: '其他',
    label: '其他',
  },
]


//提交
let add = () => {
  http({
    url: "/householdManagement/add",
    method: "POST",
    data: addData.value,
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      setTimeout(() => {
        router.push("/home/HouseholdManagement");
      }, 1500);
    } else {
      ElMessage.error("新增失败");
    }
  });
};

//返回
let back = () => {
  router.push("/home/HouseholdManagement");
};

onMounted(() => {
  console.log("挂载后");
});
</script>

<style lang="less" scoped>
.NewArea {
  width: 70%;
  // height: 100%;
  margin: auto;
  .NewArea-tittle {
    margin-top: 20px;
    background-color: white;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      p {
        margin-bottom: 10px;
        span {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .NewArea-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .add {
      width: 500px;
      margin: auto;
      .el-form-item {
        margin-bottom: 30px;
        position: relative;
        .pos {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }
      .el-input,
      .el-textarea {
        width: 350px;
      }
    }
  }
}
</style>
